<template>
    <div>
       <p>添加管理员</p>
       <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
   
           <a-form-item label="角色" v-bind="validateInfos.role">
               <a-select v-model:value="modelRef.role" placeholder="" style="width:300px;">
                   <a-select-option v-for="(item,index) in datas" :key="index" :value="item.name">{{item.name}}</a-select-option>
                   <!-- <a-select-option value="beijing">Zone two</a-select-option> -->
               </a-select>
           </a-form-item>
           <a-form-item label="登录名字" v-bind="validateInfos.name">
               <a-input
                   v-model:value="modelRef.name"
                   @blur="validate('name', { trigger: 'blur' }).catch(() => {})"
                   style="width:500px;"
               />
           </a-form-item>
           <a-form-item label="密码" v-bind="validateInfos.password">
               <a-input
                   v-model:value="modelRef.password"
                   @blur="validate('name', { trigger: 'blur' }).catch(() => {})"
                   style="width:500px;"
               />
           </a-form-item>
           <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
               <a-button type="primary" @click.prevent="onSubmit">修改</a-button>
               <a-button style="margin-left: 10px" @click="shibai()">取消</a-button>
           </a-form-item>
     </a-form>
    </div>
   </template>
   
   <script setup>
   import {getRoleData} from '../../../api/role'
   import {putManagerData} from '../../../api/manager'
   import { defineComponent, reactive, toRefs,toRaw,onMounted } from 'vue';
   import { Form } from 'ant-design-vue';
   import { useRoute ,useRouter} from 'vue-router'
   const route = useRoute()
   let query = reactive({datas:[]})
   const router = useRouter()
   onMounted(()=>{
    let datas = JSON.parse(JSON.stringify(route.query))
    // console.log(datas);
    modelRef.name = datas.name
    modelRef.id = datas.id
    modelRef.role = datas.role
       getdata()
   })
   const getdata = async()=>{
       let {data} = await getRoleData()
       query.datas = data.data
       console.log(data.data);
   }
   
   const useForm = Form.useForm;
   let modelRef = reactive({
        id:'',
       name: '',
       role: undefined,
       password:''
   });
   
   const rulesRef = reactive({
       name: [
       {
           required: true,
           message: 'Please input Activity name',
       },
       {
           min: 1,
           max: 100,
           message: 'Length should be 3 to 5',
           trigger: 'blur',
       },
       ],
       password: [
       {
           required: true,
           message: 'Please input Activity password',
       },
       {
           min: 1,
           max: 100,
           message: 'Length should be 3 to 5',
           trigger: 'blur',
       },
       ],
       role: [
       {
           required: true,
           message: 'Please select role',
       },
       ],
   });
   const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef);
   
   const onSubmit = () => {
       validate()
       .then(() => {
           console.log(toRaw(modelRef));
           let qq = toRaw(modelRef)
           let eq = {"name":qq.name,"role":qq.role,'id':qq.id}
           putManagerData(eq)
           shibai()
       })
       .catch(err => {
           console.log('error', err);
       });
   };
   
   const shibai =  async ()=>{
       await router.push({path:'admin_list'})
   }
   let {datas} = toRefs(query)
   </script>
   
   <style lang="scss" scoped>
   </style>
